// https://nuxt.com/docs/api/configuration/nuxt-config
import transformerDirectives from "@unocss/transformer-directives";
import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  ssr: false,
  app: {
    head: {
      htmlAttrs: {},
      bodyAttrs: { class: "", "data-unocss": "" },
      title: "webGPU",
      meta: [
        {
          name: "viewport",
          content:
            "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover",
        },
      ],
    },
  },

  runtimeConfig: {
    public: {
      apiBaseUrl: "/api",
      consoeList: [],
    },
  },
  plugins: [
    // 虽然插件会自动导入，但写在这里可以更好的控制顺序
    { src: "~/plugins/console.client.ts", mode: "client", ssr: false },
  ],
  modules: [
    // '@nuxtjs/tailwindcss',
    "@pinia/nuxt",
    "@vueuse/nuxt",
    "@element-plus/nuxt",
    "@unocss/nuxt",
    "nuxt-icon",
    "nuxt-lodash",
    "~/modules/auth/index",
    "dayjs-nuxt",
    "@nuxt/image",
    // "ts-md5/dist/md5"
    // '@sidebase/nuxt-auth',
  ],

  css: ["~/assets/normalize.css", "~/assets/base.scss"],
  elementPlus: {
    importStyle: "scss",
    themes: ["dark"],
    // icon: 'ElIcon',
  },
  unocss: {
    // uno: {
    // prefix: '',
    // },
    // icons: {
    //   cdn: 'https://esm.sh/',
    //   collections: {
    //     // carbon: () =>
    //     //   import('@iconify-json/carbon/icons.json').then((i) => i.default),
    //     // mdi: () =>
    //     //   import('@iconify-json/mdi/icons.json').then((i) => i.default),
    //     // logos: () =>
    //     //   import('@iconify-json/logos/icons.json').then((i) => i.default),
    //   },
    // },
    theme: {
      colors: {
        primary: "var(--el-color-primary)",
        success: "var(--el-color-success)",
        info: "var(--el-color-info)",
        warning: "var(--el-color-warning)",
        danger: "var(--el-color-danger)",
        error: "var(--el-color-error)",
        disabled: "var(--el-text-color-disabled)",
      },
    },
    preflight: false,
    preflights: [
      {
        layer: "preflights",
        getCSS: ({ theme }) => {
          interface Colors extends Record<string | number, string | Colors> {}
          function isString(x: any): x is string {
            return typeof x === "string";
          }
          function getCSS(prefix: string, colors: Colors = {}): string {
            return Object.keys(colors)
              .map((key) => {
                if (isString(colors[key])) {
                  return `${prefix}${key}: ${colors[key]};`;
                } else {
                  return getCSS(`${prefix}${key}-`, <Colors>colors[key]);
                }
              })
              .join("\n");
          }
          return `:root{ ${getCSS(
            "--un-color-",
            (<{ colors?: Colors }>theme)?.colors
          )} }`;
        },
      },
    ],
    variants: [
      (matcher) => {
        // 增加权重，使unocss能覆盖到组件样式
        return {
          matcher,
          selector: (s) => `body[data-unocss] ${s}`,
        };
      },
    ],
    transformers: [transformerDirectives()],
    // preprocess(matcher) {
    //   // 此处可以定义私有前缀
    //   return matcher.startsWith('prefix-')
    //   ? matcher.slice(7)
    //   : undefined // ignore
    // },
  },
  auth: {},
  nitro: {
    experimental: {
      websocket: true,
    },
    devProxy: {
      // '/api': {
      //   target: "http://localhost:3001", // 这里是接口地址
      //   changeOrigin: true,
      //   prependPath: true,
      // },
    },
    storage: {
      redis: {
        driver: "redis",
        /* redis connector options */
        port: process.env.REDIS_PORT, // Redis port
        host: process.env.REDIS_URL, // Redis host\
        password: process.env.REDIS_PASSWORD,
        db: process.env.REDIS_DB, // Defaults to 0
      },
    },
  },
  devServer: {
    host: "0.0.0.0",
    port: 3000,
  },
});
